<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="http://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h1>综合练习1</h1>
        <!-- 1.先进行页面布局，放置一个复选框，一个下拉列表框，两个文本框，一个显示div。
        2.先把每个表单元素对应的数据展示出来查看，后期删除
        3.把下拉框和结果div进行隐藏和显示操作
        4.获取文本框数据，根据是否是会员和会员等级进行折扣计算，
        可以使用计算属性完成，通过文本框的回车实现结果展示 -->
        <input type="checkbox" v-model="toggleValue">是否会员
        <div v-show="toggleValue">
            <select v-model="singleSelect">
                <option value="钻石会员">钻石会员</option>
                <option value="黄金会员">黄金会员</option>
                <option value="白银会员">白银会员</option>
            </select>
        </div>

        <br>{{singleSelect}}欢迎您

       
            <div>
                数量：<input type="text" v-model="sl">
                <br>单价：<input type="text" v-model="dj" @keydown.enter="show=true">
            </div>
        <div v-show="show">
            尊敬的{{singleSelect}}，你购买的数量是{{sl}},单价是{{dj}},
            折扣是{{zk}}，总价是{{zj}}
        </div>
        </div>

</body>

</html>

<script>
    const connApp = Vue.createApp({
        data() {
            return {
                singleSelect: '顾客',
                toggleValue: false,
                sl: '',
                dj: '',
                zk: '1',
                show:false,
                zj:''
            }
        },
        computed:{
            zk(){
                if(this.singleSelect=='顾客')
                    return 1;
                else if(this.singleSelect=='白银会员')
                    return 0.9;
                else if(this.singleSelect=='黄金会员')
                    return 0.8;
                else 
                    return 0.7;
            },
            zj(){
                return this.sl*this.dj*this.zk;
            }
        }
    }).mount("#app")
</script>